<template>
  <u-popup
    mode="bottom"
    v-model="showPopup"
    :z-index="999"
    border-radius="24"
    safe-area-inset-bottom
  >
    <view class="popBox">
      <view class="popup-title">
        <view class="let">{{ title }}</view>

        <i class="iconfont icon-close" @click="showPopup = false"></i>
      </view>

      <scroll-view scroll-y class="items">
        <view
          class="item"
          v-for="item of sharerList"
          :key="item.id"
          @click="handle('checked', item)"
        >
          <view class="let">
            <view class="nickname"
              >{{ item.nickname }}
              <text class="des">{{ item.is_use ? "" : "待绑定" }}</text></view
            >
            <view class="des" v-if="item.username">{{ item.username }}</view>
          </view>
          <view class="rig">
            <!-- <i
              class="iconfont icon-xuanzekuangmoren"
              v-if="item.id !== params.id"
            ></i>
            <i class="iconfont icon-success-fill" v-else></i> -->

            <view class="btn" @click="$emit('callback', item)">
              {{ item.is_use ? "分享" : "绑定" }}
            </view>
          </view>
        </view>
      </scroll-view>

      <view class="popBtn" v-if="hasAdd">
        <u-button
          @click="$emit('bind')"
          :disabled="disabled"
          :customStyle="{
            background: '#F0250E',
            color: '#fff',
            borderRadius: '32px'
          }"
          :hoverStartTime="hoverStartTime"
          >新增绑定</u-button
        >
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false,
      hoverStartTime: 1000000,
      params: {
        id: "",
        is_use: 0
      }
    };
  },

  props: {
    title: {
      type: String,
      default: ""
    },

    sharerList: {
      type: Array,
      default() {
        return [];
      }
    },

    hasAdd: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    handle(type, params) {
      switch (type) {
        case "checked":
          this.params = params;
          break;

        case "submit":
          this.submit();
          break;

        default:
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.popBox {
  display: flex;
  flex-direction: column;
  padding: 0 0;
}

.popup-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26rpx 36rpx;

  .let {
    font-size: 32rpx;
    color: #262626;
    font-weight: bold;
  }

  .iconfont {
    color: #262626;
  }
}

.items {
  padding: 30rpx;
  max-height: 500rpx;
  overflow-y: auto;

  .item {
    display: flex;
    padding: 10rpx 0;
  }

  .let {
    flex: 1;
    overflow: hidden;
    margin-right: 10rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #262626;
  }

  .rig {
    .iconfont {
      font-size: 44rpx;
      color: #262626;
    }

    .icon-success-fill {
      color: #f0250e;
    }
  }
}

.popBtn {
  margin-top: 20rpx;
  padding: 10rpx 30rpx;
  border-top: 1px solid #f2f2f2;
}

.btn {
  margin-left: 20rpx;
  padding: 10rpx 42rpx;
  background: #f0250e;
  color: #fff;
  font-size: 28rpx;
  border-radius: 4rpx;
}

.des {
  font-size: 26rpx;
  color: #8c8c8c;
}
</style>
